<template>
<!-- 管理员管理 -->
  <div>
    <h1>管理员管理</h1>
    <hr>
    <el-button type="primary" class="add" @click="add">添加账号</el-button>




    <el-table :data="quanXianList" style="width: 100%">
      <el-table-column label="管理员账号" width="180">
        <template slot-scope="scope">
          <el-popover placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.username }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="上次登录时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.last_login_time }}</span>
        </template>
      </el-table-column>

      <el-table-column label="邮箱" width="180">
        <template slot-scope="scope">
          <el-popover placement="top">
            <p>邮箱: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.email }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="是否可用">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" v-show="scope.row.is_enable"
            @click="updateEnable(scope.row.id, scope.row.is_enable)">可用</el-button>
          <el-button size="mini" type="primary" v-show="!scope.row.is_enable"
            @click="handleEdit(scope.$index, scope.row)">不可用</el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="update(scope.row)"> 修改</el-button>
          <el-button size="mini" type="danger" @click="deleteAdmin(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="pageDiv">
      <el-pagination background layout="prev, pager, next" :total="pageCount" :page-size="pageSize"
        @current-change="currentChange">
      </el-pagination>
    </div>
  </div>
</template>

  <script>
export default {
  created() {
    //列表渲染
    this.getList(this.page, this.pageSize);
  },
  data() {
    return {
      quanXianList: [],
      page: 1,
      pageSize: 5,
      pageCount: '',
    }
  },
  methods: {
    update(a) {
      this.$router.push({ name: 'AdminAdd', params: { data: a } })
    },
    // 添加用户按钮
    add() {
      this.$router.push('/AdminAdd')

    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 列表渲染函数
    getList(page, pageSize) {

      this.$http({
        url: '/admin/selectAll',
        method: 'POST',
        params: {
          page,
          pageSize
        }
      })
        .then((res) => {
          // console.log('权限列表数据', res)
          this.quanXianList = res.data.data
          this.pageCount = res.data.count
        })
        .catch((err) => {
          console.log('权限列表请求失败', err)

        })
    },
    //分页
    currentChange(page) {
      // console.log('分页',page)
      this.page = page;
      this.getList(page, this.pageSize)
    },
    // 修改是否可用
    updateEnable(id, isEnable) {

      this.$http({
        url: '/admin/updateEnable',
        method: 'GET',
        params: {
          id,
          isEnable
        }
      })
        .then((res) => {
          console.log('修改是否可用成功', res)

        })
        .catch((err) => {
          console.log('修改是否可用失败', err)

        })
    },
    //删除管理员/admin/delete
    deleteAdmin(id) {

      this.$http({
        url: '/admin/delete',
        method: 'GET',
        params: {
          id
        }
      })
        .then((res) => {
          console.log('删除管理员', res)
        })
        .catch((err) => {
          console.log('删除管理员失败', err)

        })
    },
  }
}
</script>
<style lang="scss" scoped>
 h1 {
    font-size: 30px;
  }

  hr {
    margin: 20px 0 20px 0;
    border-top: 2px solid rgba(128, 128, 128, 0.753);
  }
.add {
  margin: 20px 0px 20px 0;
}

.pageDiv {
  margin: 50px 0 0 0;
  text-align: center;
}
</style>


<!-- 没用的页面，不知道路由 -->